<template>
	<view class="tab-container">
		<!-- 统计卡片区域 - 白色背景+竖线间隔 -->
		<view class="stats-container">
			<view class="stats-grid">
				<!-- 第一行统计项 -->
				<view class="stats-row">
					<view class="stats-item" v-for="(item, index) in firstRowStats" :key="index">
						<view class="stats-value">{{ item.value }}</view>
						<view class="stats-label">{{ item.label }}</view>
						<!-- 最后一项不加竖线 -->
						<view class="divider" v-if="index !== firstRowStats.length - 1"></view>
					</view>
				</view>

				<!-- 第二行统计项 -->
				<view class="stats-row">
					<view class="stats-item" v-for="(item, index) in secondRowStats" :key="index">
						<view class="stats-value">{{ item.value }}</view>
						<view class="stats-label">{{ item.label }}</view>
						<!-- 最后一项不加竖线 -->
						<view class="divider" v-if="index !== secondRowStats.length - 1"></view>
					</view>
				</view>
			</view>
			
			<chart10></chart10>
		</view>
	</view>
</template>

<script>
	import chart10 from './chart10.vue';
	export default {
		components:{
			chart10
		},
		data() {
			return {
				

				// 第一行统计数据
				firstRowStats: [{
						label: '总客户数',
						value: 621
					},
					{
						label: '重要价值客户',
						value: 60
					},
					{
						label: '潜力客户',
						value: 80
					},
					{
						label: '重要深耕客户',
						value: 100
					}
				],

				// 第二行统计数据
				secondRowStats: [{
						label: '新用户',
						value: 200
					},
					{
						label: '重要挽回客户',
						value: 60
					},
					{
						label: '一般推荐客户',
						value: 70
					},
					{
						label: '流失客户',
						value: 51
					}
				]
			};
		},
		methods: {
			
		}
	};
</script>

<style scoped>

	/* 统计容器 - 白色背景 */
	.stats-container {
		background-color: #fff;
		/* border-radius: 16rpx; */
		padding: 30rpx 0;
	}

	/* 统计网格布局 */
	.stats-grid {
		width: 95%;
		margin: 0 auto;
	}

	/* 行容器 */
	.stats-row {
		display: flex;
		width: 100%;
		/* 行之间的间距 */
		padding: 15rpx 0;
	}

	/* 统计项 */
	.stats-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 10rpx 0;
	}

	/* 数值样式 */
	.stats-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	/* 标签样式 */
	.stats-label {
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	/* 竖线间隔 */
	.divider {
		position: absolute;
		right: 0;
		top: 15%;
		height: 70%;
		width: 1px;
		background-color: #e5e5e5;
		/* 淡灰色竖线 */
	}

	/* 修复u-tabs底部线条样式 */
	::v-deep .u-tabs__line {
		background-color: #3589e7 !important;
		height: 6rpx !important;
	}
</style>